<template>
  <div class="pricing-engine-container">
    <el-card class="pricing-card">
      <template #header>
        <div class="card-header">
          <h2>智能定价引擎</h2>
          <el-button type="primary">运行定价分析</el-button>
        </div>
      </template>
      
      <div class="pricing-content">
        <div class="filters">
          <el-form :model="filterForm" label-position="top" inline>
            <el-form-item label="产品类别">
              <el-select v-model="filterForm.category" placeholder="选择产品类别">
                <el-option label="电子产品" value="electronics" />
                <el-option label="机械零件" value="mechanical" />
                <el-option label="包装材料" value="packaging" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="定价策略">
              <el-select v-model="filterForm.strategy" placeholder="选择定价策略">
                <el-option label="成本加成" value="cost-plus" />
                <el-option label="市场导向" value="market-based" />
                <el-option label="竞争导向" value="competitor-based" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="时间范围">
              <el-date-picker
                v-model="filterForm.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-form>
        </div>
        
        <div class="data-view">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="定价建议" name="recommendations">
              <el-table :data="pricingData" style="width: 100%" v-loading="loading">
                <el-table-column prop="productId" label="产品ID" width="120" />
                <el-table-column prop="productName" label="产品名称" width="180" />
                <el-table-column prop="currentPrice" label="当前价格" width="120" />
                <el-table-column prop="recommendedPrice" label="建议价格" width="120" />
                <el-table-column prop="difference" label="价格差异(%)" width="120" />
                <el-table-column prop="confidenceScore" label="置信度评分" width="120">
                  <template #default="scope">
                    <el-progress :percentage="scope.row.confidenceScore" :color="getConfidenceColor(scope.row.confidenceScore)" />
                  </template>
                </el-table-column>
                <el-table-column prop="reason" label="定价建议原因" />
                <el-table-column label="操作" fixed="right" width="120">
                  <template #default>
                    <el-button link type="primary">详情</el-button>
                    <el-button link type="primary">采纳</el-button>
                  </template>
                </el-table-column>
              </el-table>
              
              <div class="pagination">
                <el-pagination
                  v-model:current-page="currentPage"
                  v-model:page-size="pageSize"
                  :page-sizes="[10, 20, 50, 100]"
                  background
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </el-tab-pane>
            
            <el-tab-pane label="价格趋势" name="trends">
              <div class="chart-container" ref="trendChart">
                <!-- 价格趋势图表 -->
                <div v-if="!loading" class="chart" style="height: 400px"></div>
                <div v-else class="loading-container">
                  <el-skeleton :rows="6" animated />
                </div>
              </div>
            </el-tab-pane>
            
            <el-tab-pane label="竞争对手分析" name="competitors">
              <div class="chart-container" ref="competitorChart">
                <!-- 竞争对手分析图表 -->
                <div v-if="!loading" class="chart" style="height: 400px"></div>
                <div v-else class="loading-container">
                  <el-skeleton :rows="6" animated />
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'

// 定义表单数据
const filterForm = reactive({
  category: '',
  strategy: '',
  dateRange: []
})

// 定义表格数据
const pricingData = ref([
  {
    productId: 'P001',
    productName: '高性能处理器X9',
    currentPrice: 1299.00,
    recommendedPrice: 1399.00,
    difference: 7.7,
    confidenceScore: 95,
    reason: '市场需求上升，竞品价格上涨'
  },
  {
    productId: 'P002',
    productName: '工业传感器T300',
    currentPrice: 499.00,
    recommendedPrice: 459.00,
    difference: -8.0,
    confidenceScore: 85,
    reason: '原材料价格下降，竞争加剧'
  },
  {
    productId: 'P003',
    productName: '防震包装材料',
    currentPrice: 150.00,
    recommendedPrice: 160.00,
    difference: 6.7,
    confidenceScore: 78,
    reason: '运输成本增加，市场需求稳定'
  }
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)
const loading = ref(false)

// 活动标签页
const activeTab = ref('recommendations')

// 图表引用
const trendChart = ref(null)
const competitorChart = ref(null)
let trendChartInstance: echarts.ECharts | null = null
let competitorChartInstance: echarts.ECharts | null = null

// 获取置信度颜色
const getConfidenceColor = (score: number): string => {
  if (score >= 90) return '#67C23A'
  if (score >= 70) return '#E6A23C'
  return '#F56C6C'
}

// 处理分页变化
const handleSizeChange = (val: number) => {
  pageSize.value = val
  fetchData()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  fetchData()
}

// 获取数据方法
const fetchData = () => {
  loading.value = true
  
  // 模拟API请求
  setTimeout(() => {
    // 请求成功后更新数据
    loading.value = false
  }, 800)
}

// 初始化价格趋势图表
const initTrendChart = () => {
  if (!trendChart.value) return
  
  trendChartInstance = echarts.init(trendChart.value)
  
  const option = {
    title: {
      text: '产品价格趋势分析',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['实际价格', '预测价格', '市场均价'],
      bottom: '0'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
    },
    yAxis: {
      type: 'value',
      name: '价格 (元)'
    },
    series: [
      {
        name: '实际价格',
        type: 'line',
        data: [800, 850, 830, 880, 910, 950, 980, 1000]
      },
      {
        name: '预测价格',
        type: 'line',
        data: [820, 860, 840, 890, 920, 960, 990, 1020],
        lineStyle: {
          type: 'dashed'
        }
      },
      {
        name: '市场均价',
        type: 'line',
        data: [790, 810, 825, 870, 900, 930, 960, 990]
      }
    ]
  }
  
  trendChartInstance.setOption(option)
}

// 初始化竞争对手分析图表
const initCompetitorChart = () => {
  if (!competitorChart.value) return
  
  competitorChartInstance = echarts.init(competitorChart.value)
  
  const option = {
    title: {
      text: '竞争对手价格对比',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['我司价格', '竞争对手A', '竞争对手B', '竞争对手C'],
      bottom: '0'
    },
    xAxis: {
      type: 'category',
      data: ['产品1', '产品2', '产品3', '产品4', '产品5']
    },
    yAxis: {
      type: 'value',
      name: '价格 (元)'
    },
    series: [
      {
        name: '我司价格',
        type: 'bar',
        data: [1000, 820, 950, 750, 1200]
      },
      {
        name: '竞争对手A',
        type: 'bar',
        data: [1050, 800, 980, 780, 1250]
      },
      {
        name: '竞争对手B',
        type: 'bar',
        data: [980, 840, 920, 720, 1180]
      },
      {
        name: '竞争对手C',
        type: 'bar',
        data: [1020, 810, 940, 760, 1220]
      }
    ]
  }
  
  competitorChartInstance.setOption(option)
}

// 监听标签页变化
const handleTabChange = () => {
  if (activeTab.value === 'trends' && !trendChartInstance) {
    setTimeout(initTrendChart, 100)
  } else if (activeTab.value === 'competitors' && !competitorChartInstance) {
    setTimeout(initCompetitorChart, 100)
  }
}

// 窗口大小变化时重绘图表
const resizeCharts = () => {
  trendChartInstance?.resize()
  competitorChartInstance?.resize()
}

// 组件挂载完成
onMounted(() => {
  // 初始加载数据
  fetchData()
  
  // 监听标签页变化
  watch(activeTab, handleTabChange)
  
  // 监听窗口大小变化
  window.addEventListener('resize', resizeCharts)
})

// 组件卸载前清理
onUnmounted(() => {
  window.removeEventListener('resize', resizeCharts)
  trendChartInstance?.dispose()
  competitorChartInstance?.dispose()
})
</script>

<style scoped>
.pricing-engine-container {
  padding: 20px;
}

.pricing-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filters {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.chart-container {
  width: 100%;
  min-height: 400px;
}

.loading-container {
  padding: 20px;
}
</style> 